<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>{{ page.title|escape }}</title>
    <style type="text/css">
      body { margin: 0; padding: 0; }
      #map_canvas { width: 100%; height: 100%; }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
      function initialize() {
        var myLatLng = new google.maps.LatLng({{ page_ll.0 }}, {{ page_ll.1 }});

        var map = new google.maps.Map(document.getElementById("map_canvas"), {
          zoom: 8,
          center: myLatLng,
          mapTypeId: google.maps.MapTypeId.HYBRID
        });

        var marker = new google.maps.Marker({
          position: myLatLng,
          title: "{{ page.title|escape }}",
          map: map,
          draggable: true
        });
    
        google.maps.event.addListener(marker, 'dragend', function() {
          var pos = marker.getPosition();
          jQuery.ajax({
            url: '/w/map',
            data: { page_name: "{{ page.title }}", lat: pos.lat(), lng: pos.lng() },
            dataType: 'json',
            type: 'POST',
            success: function (data) {
              var ll = new google.maps.LatLng(data[0], data[1]);
              marker.setPosition(ll);
              map.panTo(ll);
            }
          });
        });
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>
